
//#region 左侧菜单
let carouselMenuList=document.getElementsByClassName('carousel-menu')
let detailTypes=document.getElementsByClassName('detailType-div')

// 给所有二级子菜单添加悬浮与离开效果
for(let i=0;i<detailTypes.length;i++){
    let dt=detailTypes[i]
    dt.addEventListener('mouseenter', () => {
        setBorderRight()
        dt.style.zIndex=1;
        carouselMenuList[i].style.border="1px solid #ff5f00"
        carouselMenuList[i].style.borderRight="0"
    });
    dt.addEventListener('mouseleave', () => {
        dt.style.zIndex=-1;
        carouselMenuList[i].style.border='0'
        clearBorderRight()
    });
}

// 给所有一级菜单添加悬浮与离开效果
for(let i=0;i<carouselMenuList.length;i++){
    let menu=carouselMenuList[i]
    menu.addEventListener('mouseenter', () => {
        let detailType=document.getElementsByClassName('detailType-div')[i]
        detailType.style.zIndex=1;
        setBorderRight()
        menu.style.borderRight="0"
    });
    menu.addEventListener('mouseleave', () => {
            let detailType=document.getElementsByClassName('detailType-div')[i]
            detailType.style.zIndex=-1;
            menu.style.border='0'
            clearBorderRight()
    });
}

// 设置所有一级菜单的右边框
function setBorderRight(){
    for(let i=0;i<carouselMenuList.length;i++){
        let menu=carouselMenuList[i]
        menu.style.borderRight="1px solid #ff5f00"
    }
}
// 清除所有一级菜单的右边框
function clearBorderRight(){
    for(let i=0;i<carouselMenuList.length;i++){
        let menu=carouselMenuList[i]
        menu.style.borderRight="0"
    }
}
//#endregion


//#region 轮播图
let imgNum=0    //用于控制轮播的图片，imgNum=0代表第一个轮播图
// 让图片宽高与容器宽高相同
let carouselCenterDiv=document.getElementsByClassName('carousel-center')[0]
let imageList=document.getElementsByClassName('carouselImage')
for(let i=0;i<imageList.length;i++){
    let img=imageList[i]
    img.style.width=carouselCenterDiv.clientWidth+'px'      //与容器等宽
    img.style.height=carouselCenterDiv.clientHeight+'px'    //与容器登高
}

//初始化轮播圆点
let dotFarent=document.getElementsByClassName('carouselDot-div')[0]
for(let i=0;i<imageList.length;i++){    //有多少轮播图就有多少轮播圆点
    let span=document.createElement("span")
    span.style.backgroundImage="url('images/小圆点未选中.png')"
    if(i==0)span.style.backgroundImage="url('images/小圆点选中.png')"
    dotFarent.appendChild(span)
}


//轮播切换
setInterval(carouselRun,4000)
function carouselRun(){
    let carouselImageListDiv=document.getElementsByClassName('carouselImageList-div')[0]
    imgNum=imgNum+1
    if(imgNum>=imageList.length){
        imgNum=0
    }
    carouselImageListDiv.style.left=-imgNum*carouselCenterDiv.clientWidth+'px'
    setCarouselDot(imgNum)
}

// 设置轮播小圆点
function setCarouselDot(index){
    let dotList= document.getElementsByClassName('carouselDot-div')[0].children
    for(let i=0;i<dotList.length;i++){
        let dot=dotList[i]
        dot.style.backgroundImage="url('images/小圆点未选中.png')"      //清空所有
    }
    dotList[index].style.backgroundImage="url('images/小圆点选中.png')" //设置当前
}

//轮播左移
function CarouselLeftMove(){
    imgNum=imgNum-2;
    if(imgNum<0){
        imgNum=-1
    }
    console.log("hhh")
    carouselRun()
}

//轮播右移
function CarouselRightMove(){
    if(imgNum<0){
        imgNum=0
    }
    console.log("hhh")
    carouselRun()
    console.log("hhhhh")
}
//#endregion
